<template>
  <el-dialog
    width="500px"
    title="修改租期"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
  >
    <el-form
      class="ruleForm"
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
      <el-form-item label="订单总金额" prop="totalAmount">
        <el-input
          clearable
          maxlength="10"
          type="number"
          v-model="form.totalAmount"
          placeholder="请输入订单总金额"
        ></el-input>
      </el-form-item>
      <el-form-item label="首付金额" prop="firstAmount">
        <el-input
          clearable
          maxlength="11"
          type="number"
          v-model="form.firstAmount"
          placeholder="请输入首付金额"
        ></el-input>
      </el-form-item>
      <el-form-item label="分期数" prop="lease">
        <el-input type="number" placeholder="请输入分期数" v-model="form.lease">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { setAddress, getRegion } from "@/api/order";
import { updateLease } from '@/api/lease'
import { checkMobile, checkString } from "@/utils/validate";
export default {
  props: ["editItem"],
  data() {
    let validateNumberAndNotThanTen = (rule, value, callback) => {
      let reg = /\d/gi;
      if (!reg.test(value)) {
        callback(new Error("请输入数字"));
      } else {
        if (value > 10) {
          callback(new Error("输入的期数不能大于10"));
        } else {
          callback();
        }
      }
    };
    let validateString = (rule, value, callback) => {
      if (!checkString(value)) {
        callback(new Error("不能包含特殊字符"));
      } else {
        callback();
      }
    };
    return {
      orderId: "",
      form: {
        totalAmount: "",
        firstAmount: "",
        lease: "",
      },
      rules: {
        totalAmount: [
          { required: true, message: "请输总金额", trigger: "blur" },
          { validator: validateString, trigger: "blur" },
        ],
        firstAmount: [
          { required: true, message: "请输入首付金额", trigger: "blur" },
          { validator: validateString, trigger: "blur" },
        ],
        lease: [
          { required: true, message: "请输入期数", trigger: "change" },
          { validator: validateNumberAndNotThanTen, trigger: "blur" },
        ],
      },
      dialogVisible: false,
      optionProps: {
        value: "name",
        label: "name",
        expandTrigger: "hover",
        children: "sub",
      },
      areaList: [],
    };
  },
  methods: {
    handleMobileChange() {
      this.form.mobile = this.form.mobile.replace(/[^\d]/g, "");
    },
    submit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$confirm("您确定要修改租期吗?", "确定", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          })
            .then(() => {
              this.$confirm("再次确定是否需要修改", "确定", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
              })
                .then(() => {
                  updateLease({orderId:this.orderId,...this.form}).then((res) => {
                    this.$emit("init");
                    this.dialogVisible = false;
                  });
                })
                .catch(() => {});
            })
            .catch(() => {});
        } else {
          this.$message({
            message: "请检查表单错误",
            type: "error",
          });
          return false;
        }
      });
    },
    init() {
      getRegion().then((res) => {
        this.areaList = res ? res[0].sub : [];
        for (let key in this.form) {
          this.form[key] = this.editItem[key] || "";
        }
      });
    },
    open(orderId) {
      this.dialogVisible = true;
      this.orderId = orderId;
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.init();
      } else {
        this.$refs["ruleForm"].resetFields();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
